<template>
	<view class="login-container">
		<view class="login-switch">
			<text :class="{ 'active': loginMethod === 'phone' }" @tap="toggleLogin('phone')">手机号登录</text>
			<text :class="{ 'active': loginMethod === 'email' }" @tap="toggleLogin('email')">邮箱登录</text>
		</view>
		<view class="login-inputs">
			<view v-if="loginMethod === 'phone'">
				<input type="tel" placeholder="请输入手机号" v-model="phoneNumber">
				<view class="login-send">
					<input type="text" class="login-send-left" placeholder="请输入验证码" v-model="verificationCode">
					<button @tap="sendPhoneCode" :disabled="isSending">发送验证码</button>
					<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="60"
						:start="isStart"></uni-countdown>
				</view>
			</view>
			<view v-else-if="loginMethod === 'email'">
				<input type="tel" placeholder="请输入邮箱" v-model="email">
				<view class="login-send">
					<input type="text" class="login-send-left" placeholder="请输入验证码" v-model="verificationCode">
					<button @tap="sendEmailCode" :disabled="isSending">发送验证码</button>
					<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="60"
						:start="isStart"></uni-countdown>
				</view>

			</view>
		</view>
		<button class="login-button" @tap="handleLogin">{{ loginMethod === 'phone' ? '手机号登录' : '邮箱登录' }}</button>

		<button @tap="wxLogin">微信登录</button>
		<view class="icon-weixin"></view>
	</view>
</template>

<script setup lang="ts">
import { useMemberStore } from '../../stores';
import { loginByWechat, sendPhone, sendEmail, login } from '../../services/login';
import { ref } from 'vue';




const loginMethod = ref<'phone' | 'email'>('phone');
const email = ref('');
const phoneNumber = ref('');
const verificationCode = ref('');
const isSending = ref(false);
const isStart = ref(false)

const memberStore = useMemberStore();



// Toggle between phone and email login
const toggleLogin = (method: 'phone' | 'email') => {
	loginMethod.value = method;
};

// Handle login logic based on selected method
const handleLogin = () => {

	if (loginMethod.value === 'phone') {
		if (phoneNumber.value === '' || verificationCode.value === '') {
			uni.showToast({ icon: 'none', title: '请输入手机号或验证码' })
			return
		}
		login(phoneNumber.value, null, verificationCode.value).then(res => {
			if (res.code === 200) {
				memberStore.setProfile(res.data);
				uni.showToast({ icon: 'none', title: '登录成功~' })
				uni.navigateBack();
			}

		});
	} else if (loginMethod.value === 'email') {
		if (email.value === '' || verificationCode.value === '') {
			uni.showToast({ icon: 'none', title: '请输入邮箱或验证码' })
			return
		}
		login(null, email.value, verificationCode.value).then(res => {
			if (res.code == 200) {
				memberStore.setProfile(res.data);
				uni.showToast({ icon: 'none', title: '登录成功~' })
				uni.navigateBack();
			}



		});
	}
};
const sendPhoneCode = () => {
	isStart.value = true;
	isSending.value = true;
	setTimeout(() => {
		isSending.value = false;
		sendPhone(phoneNumber.value)
		// Simulated success message or further logic
	}, 2000); // Simulated 2 seconds delay for demonstration
};

const sendEmailCode = () => {
	isStart.value = true;
	isSending.value = true;
	setTimeout(() => {
		isSending.value = false;
		sendEmail(email.value)
		// Simulated success message or further logic
	}, 2000); // Simulated 2 seconds delay for demonstration
};
const wxLogin = () => {
	// uni.authorize({
	// 	scope: 'scope.userInfo',
	// 	success() {
	uni.getUserInfo({
		desc: '登录的数据',
		success(users) {
			uni.login({
				provider: 'weixin', // 使用微信登录
				success(lres) {
					const params = {
						code: lres.code
					};
					loginByWechat(params.code).then(res => {
						memberStore.setProfile(res.data);
						uni.showToast({ icon: 'none', title: '登录成功~' })
						uni.navigateBack();

					});
				}
			});
		}
	});
	// 	}
	// });
}
</script>

<style scoped>
.login-container {
	padding: 20px;
	background-color: #f0f0f0;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 300px;
	margin: 0 auto;
}

.login-switch {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
}

.login-send-left {
	width: 80px;
}

.login-send {
	display: flex;
	height: 50px;
}

.login-switch text {
	font-size: 16px;
	cursor: pointer;
	padding-bottom: 8px;
	border-bottom: 2px solid transparent;
}

.login-switch text.active {
	border-color: #333;
}

.login-inputs input {
	width: 100%;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	background-color: white;
}


.login-inputs button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

input,
button {
	height: 40px;
	border: none !important;
}

.login-inputs button {
	font-size: 14px;
	width: 100px;

}

.login-button {
	width: 100%;
	height: 40px;
	background-color: #00aaff;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
}

.login-button:hover {
	background-color: #555;
}
</style>